<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../../css/mui.css"/>
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../../css/general.css"/>
		<style type="text/css">
			.main{
				width: 100%;
				margin: 0.5em 0;
			}
			.dherder{
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				background-color: white;
				padding: 0.5em;
			}
			.dleft{
				width: 50%;
				display: flex;
				justify-content: flex-start;
				align-items: center;
			}
			.dleft>img{
				width: 70px;
				margin: 0.5em 0.5em 0.5em 0;
			}
			.dcentent{
				width: 100%;
				margin: 0.5em 0;
				background-color: white;
				padding: 0.5em;
			}
			.dcentent>div{
				padding: 0.5em 0;
				
			}
			.dpay{
				width: 100%;
				margin: 0.5em 0;
				background-color: white;
				padding: 0.5em;
			}
			.dbz{
				width: 100%;
				margin: 0.5em 0;
				background-color: white;
				padding: 0.5em;
			}
			.dsex{
				width: 100%;
				margin: 0.5em 0;
				background-color: white;
				padding: 0.5em;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
			.dsex>div{
				width: 50%;
			}
			.footdiv>div{
				width: 50%;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.divbut{
				padding: 2em;
			}
		</style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav hbg">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left colorw"></a>
		    <h1 class="mui-title">结账</h1>
		</header>
		<div class="mui-content">
		    <div class="main">
		    	
		    	<div class="dcentent">
		    		<div class="">
		    			<span id="">
		    				应付金额:
		    			</span>
		    			<span id="pay_money">
		    			</span>
		    		</div>
		    	</div>
		    	
		    	<div class="dpay">
		    		<div class="mui-slider">
		    		    <div class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
		    		        <a class="mui-control-item" id="1" href="#item1">普通支付</a>
		    		        <a class="mui-control-item" id="3" href="#item2">移动支付</a>
		    		    </div>
		    		    <div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-6"></div>
		    		    <div class="mui-slider-group">
		    		        <div id="item1" class="mui-slider-item mui-control-content">
		    		            <ul class="mui-table-view mui-table-view-radio">
					    		    <li class="mui-table-view-cell mui-selected">
					    		        <a id="2" class="mui-navigate-right">现金支付</a>
					    		    </li>
					    		    <li class="mui-table-view-cell">
					    		        <a id="6" class="mui-navigate-right">银行卡记账</a>
					    		    </li>
					    		    <li class="mui-table-view-cell">
					    		        <a id="7" class="mui-navigate-right">其他</a>
					    		    </li>
					    		</ul>
		    		        </div>
		    		        <div id="item2" class="mui-slider-item mui-control-content">
					    		<ul class="mui-table-view mui-table-view-radio">
					    		   <li class="mui-table-view-cell">
					    		        <a id="4" class="mui-navigate-right">微信支付</a>
					    		    </li>
					    		    <li class="mui-table-view-cell">
					    		        <a id="5" class="mui-navigate-right">支付宝支付</a>
					    		    </li>
					    		</ul>
		    		        </div>
		    		    </div>
		    		</div>
		    	</div>
		    	
		    	<div class="dbz">
		    		<div class="mui-input-row">
		    		    <label>备注</label>
		    		    <input id="remark" type="text" placeholder="请输入备注">
		    		</div>
		    		
		    	</div>
		    </div>
		    
		    <div class="divbut">
		    	<button id="subbut" type="button" class="mui-btn mui-btn-blue mui-btn-block">立即结账</button>
		    </div>
		   
		    
		</div>
		<script src="../../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/req.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/muishow.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var mid = 0,pay_id = 2,percent=[],pay_money = 0,give_money = 0,recharge_money = 0;
			window.onload = function(){
				
				try{
					var str = getrequest().data;
					console.log(str)
					list = JSON.parse(str);
					mid = list.member_id;
					pay_money = list.pay_money;
					give_money = list.give_money;
					percent = list.percent;
					recharge_money = list.recharge_money;
				}catch(e){
					//TODO handle the exception
				}
				
				mui.plusReady(function(){
					var view =  plus.webview.currentWebview();
					mid = view.member_id;
					pay_money = view.pay_money;
					give_money = view.give_money;
					recharge_money = view.recharge_money;
					percent = view.percent;
					g("pay_money").innerHTML = "￥"+view.pay_money;
				})
				/*mui(".mui-slider").on("tap","a",function(e){
					console.log(this.id);
				})*/
				/*mui(".mui-table-view").on("tap",".mui-but",function(){
					console.log(this.id);
					pay_id = this.id;
				})*/
				mui(".mui-slider").on("tap",".mui-control-item",function(e){
					var slib = $(this).attr("href");
					var child = $(slib).siblings().children().children().removeClass("mui-selected");
					pay_id = 0;
				})
           	 	mui(".mui-table-view-radio").on("tap",".mui-table-view-cell",function(){
					pay_id = this.children[0].id;
				})
				
				g("subbut").addEventListener('tap',function(e){
					
					if(pay_id == 0){
						mui.toast("请选择支付方式！");
						return;
					}
					var data = {
						url:"/api/recharge/place",
						data:{
							access_token:acctoken(),
							member_id:mid,
							recharge_money:recharge_money,
							give_money:give_money,
							pay_money:pay_money,
							order_status:1,
							pay_id:pay_id,
							remark:g("remark").value,
							percent:percent
						}
					}
					console.log(data);
					ajax(data,function(res){
						console.log("充值结果",res);
						mui.toast(res.msg);
						var data = {
							order_number:res.data.order_number,
							createtime:res.data.createtime,
							pay_sort:res.data.pay_sort.name,
							pay_money:pay_money
						}
						mui.openWindow({
							url:'../../general/successpay2.html',
							id:'successpay2',
							extras:data
						})
					})
				})
				//getpaysort();
			}
			
			function getpaysort(){
				var data = {
					url:"/api/pay/sort",
					data:{access_token:acctoken()}
				}
				ajax(data,function(res){
					console.log("获取支付方式",res);
					setpaysort(res.data);
				})
			}
			function setpaysort(data){
				var str = '<ul class="mui-table-view mui-table-view-radio">';
				for(var i = 0; i < data[0].child.length; i++){
					str += '<li class="mui-table-view-cell"><a id="'+data[0].child[i].id+'" class="mui-navigate-right">'+
					data[0].child[i].name+
					'</a></li>';
				}
				str += '</ul>';
				var str2 = '<ul class="mui-table-view mui-table-view-radio">';
				for(var i = 0; i < data[1].child.length; i++){
					str2 += '<li class="mui-table-view-cell"><a id="'+data[1].child[i].id+'" class="mui-navigate-right">'+
					data[1].child[i].name+
					'</a></li>';
				}
				str2 += '</ul>';
				
			}
		</script>
	</body>

</html>